<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .d1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="d1"> 
        防抖函数
    </div>
</body>
<script>
let n=0;
var d1=document.getElementsByClassName("d1")[0]
// d1.addEventListener("click",debounce(()=>{
//     n++;
//     console.log(n)
// },500))
//绑定时要先运行外部函数
function debounce(func1,delay=1000){
let timer=null;//定时器,使用闭包保存变量
console.log("xxxx")
return ()=>{//执行的是这个返回的函数,绑定事件时先触发一次
    clearTimeout(timer);
    console.log(timer)
    timer=setTimeout(func1,delay)
}
}
function throttle(func,delay=1000){
let timer=null;//使用闭包保存定时器变量
return ()=>{
    if(timer!=null){
        return 0;
    }
    timer=setTimeout(()=>{
        //异步任务里关闭timer
        func();
        timer=null
    },delay)

}    
}
d1.addEventListener("click",throttle(()=>{console.log("hahahah")},2000))

</script>
</html>